<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改实名认证')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-autonym-edit" th:object="${usedAutonym}">
            <input name="auId" th:field="*{auId}" type="hidden">
            <div class="form-group">
            <label class="col-sm-3 control-label">昵称：</label>
            <div class="col-sm-9">
                <select class="form-control" name="uId">
                    <option th:each="u :${user}" th:selected="${u.uid eq usedAutonym.uId}" th:value="${u.uid}" th:text="${u.username}"></option>
                </select>
            </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">真实姓名：</label>
                <div class="col-sm-8">
                    <input name="auName" th:field="*{auName}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">身份证号：</label>
                <div class="col-sm-8">
                    <input name="auIdcard" th:field="*{auIdcard}" class="form-control" type="text" minlength="18" maxlength="18">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">实名状态：</label>
                <div class="col-sm-8">
                    <select name="auState" class="form-control m-b" th:with="type=${@dict.getType('used_autonym')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{auState}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">身份证正面照片：</label>
                <div class="col-sm-8">
                    <input name="file" class="myfile"  type="file">
                    <input name="bannerImg" th:field="*{auFront}" id="auFront" class="form-control" type="hidden">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">身份证反面照片：</label>
                <div class="col-sm-8">
                    <input name="file" class="myfile2"  type="file">
                    <input name="bannerImg" th:field="*{auReverses}" id="auReverses" class="form-control" type="hidden">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">
        var prefix = ctx + "used/autonym";
        $("#form-autonym-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-autonym-edit').serialize());
            }
        }

        //正面
        $(".myfile").fileinput({
            uploadUrl:ctx+"common/upload", //接受请求地址
            deleteUrl:ctx+"common/download",//删除请求地址
            uploadAsync : true, //默认异步上传
            showUpload : false, //是否显示上传按钮,跟随文本框的那个
            showRemove : false, //显示移除按钮,跟随文本框的那个
            showCaption : true,//是否显示标题,就是那个文本框
            showPreview : true, //是否显示预览,不写默认为true
            dropZoneEnabled : false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 50,//图片的最大宽度
            //maxImageHeight: 50,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount : 1, //表示允许同时上传的最大文件个数
            enctype : 'multipart/form-data',
            validateInitialCount : true,
            previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
            allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
            allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
            language : 'zh',
            initialPreviewAsData:true,
            initialPreviewShowDelete:true,
            initialPreview:[
                $("#auFront").val()

            ]
        })
        //异步上传错误结果处理
        $('.myfile').on('fileerror', function(event, data, msg) {
            console.log("fileerror");
            console.log(data);
        });
        //异步上传成功结果处理
        $(".myfile").on("fileuploaded", function(event, data, previewId, index) {
            console.log("fileuploaded+上传成功");
            console.log(data.response.fileName);
            //var ref = $(this).attr("data-ref");
            fileurl=data.response.fileName;
            $("#auFront").val(fileurl);
            // alert( $("input[name='" + file + "']").val(data.response.fileName));

        });

        //上传前
        $('.myfile').on('filepreupload', function(event, data, previewId, index) {
            console.log("filepreupload+上传前");
        });


        //反面
        $(".myfile2").fileinput({
            uploadUrl:ctx+"common/upload", //接受请求地址
            deleteUrl:ctx+"common/download",//删除请求地址
            uploadAsync : true, //默认异步上传
            showUpload : false, //是否显示上传按钮,跟随文本框的那个
            showRemove : false, //显示移除按钮,跟随文本框的那个
            showCaption : true,//是否显示标题,就是那个文本框
            showPreview : true, //是否显示预览,不写默认为true
            dropZoneEnabled : false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 50,//图片的最大宽度
            //maxImageHeight: 50,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount : 1, //表示允许同时上传的最大文件个数
            enctype : 'multipart/form-data',
            validateInitialCount : true,
            previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
            allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
            allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
            language : 'zh',
            initialPreviewAsData:true,
            initialPreviewShowDelete:true,
            initialPreview:[
                $("#auReverses").val()

            ]
        })
        //异步上传错误结果处理
        $('.myfile2').on('fileerror', function(event, data, msg) {
            console.log("fileerror");
            console.log(data);
        });
        //异步上传成功结果处理
        $(".myfile2").on("fileuploaded", function(event, data, previewId, index) {
            console.log("fileuploaded+上传成功");
            console.log(data.response.fileName);
            //var ref = $(this).attr("data-ref");
            fileurl=data.response.fileName;
            $("#auReverses").val(fileurl);
            // alert( $("input[name='" + file + "']").val(data.response.fileName));

        });

        //上传前
        $('.myfile').on('filepreupload', function(event, data, previewId, index) {
            console.log("filepreupload+上传前");
        });
    </script>
</body>
</html>